<template>
  <div>
    <div v-if="text" class="upload_text">({{ text }})</div>
    <div class="upload_bos">
      <el-image
        v-for="(item, index) in imageList()"
        v-if="disabled"
        :key="index"
        class="image_list"
        :src="item"
        :fit="'fill'"
        :preview-src-list="imageList()"
        preview-teleported
      />
      <template v-else>
        <el-upload
          v-if="maxNum == 1 ? (props.url ? false : true) : maxNum > urlList.length ? true : false"
          class="upload_demo"
          :action="httpUrl + '/member/wx/upload'"
          :headers="headers"
          :data="{ module: 'MEMBER_SERVICE' }"
          :show-file-list="false"
          :on-success="onSuccess"
          :on-error="onError"
        >
          <div class="upload_box flex-column-center">
            <el-icon :size="30"><Plus /></el-icon>
          </div>
        </el-upload>
        <div v-for="(item, index) in imageList()" :key="index" class="image_list">
          <img class="img" :src="item" />
          <div class="demo_cover flex-row-center cursor-in">
            <el-icon
              size="24"
              color="#ffffff"
              class="el-icon-zoom-in"
              @click.stop="handleView(item)"
            >
              <ZoomIn />
            </el-icon>
            <el-icon size="24" color="#ffffff" @click.stop="handleRemove(index)">
              <CircleClose />
            </el-icon>
          </div>
        </div>
      </template>
    </div>
    <el-image-viewer v-if="showImageViewer" :url-list="elimageList" @close="close" />
  </div>
</template>

<script setup lang="ts">
import type { UploadProps } from "element-plus";
import { Plus, ZoomIn, CircleClose } from "@element-plus/icons-vue";
const emit = defineEmits(["onSuccess", "onRemove"]);
import { httpsUrl } from "@/utils/httpsUrl";
import { ref } from "vue";
const headers = ref<any>({
  // "X-Access-Token": localStorage.getItem(TOKEN_KEY),
});
const httpUrl = httpsUrl.API_URL;
const elimageList = ref<any>([]);
const showImageViewer = ref(false); //组件是否显示

const props = defineProps({
  url: {
    type: String,
    default: "",
  },
  text: {
    type: String,
    default: "",
  },
  maxNum: {
    type: Number,
    required: false,
    default: 1,
  },
  other: {
    type: Object,
    require: false,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    require: false,
    default: false,
  },
  urlList: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
});

function imageList() {
  let arr = ref<any>([]);

  if (props.maxNum == 1) {
    if (props.url) {
      arr.value.push(props.url);
    }
  } else {
    arr.value = props.urlList;
  }
  return arr.value;
}

const onSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  if (response.code == 200) {
    emit("onSuccess", response.data.data.url, props.other);
  } else {
    onError();
  }
};

function onError() {
  ElMessage({
    message: "上传图片失败~",
    type: "warning",
  });
}

const close = () => {
  showImageViewer.value = false;
};
function handleView(data: any) {
  elimageList.value.push(data);
  showImageViewer.value = true;
}

function handleRemove(index: Number) {
  if (props.maxNum == 1) {
    emit("onSuccess", "", props.other);
  } else {
    emit("onRemove", index);
  }
}
</script>

<style lang="scss" scoped>
.upload_text {
  font-size: 12px;
  color: #969cad;
}

.upload_bos {
  display: flex;
  flex-wrap: wrap;

  .upload_demo {
    width: 90px !important;
    height: 90px;
    margin-top: 5px;
    margin-right: 15px;
  }

  .upload_box {
    width: 90px;
    height: 90px;
    background-color: #f2f3f5;
    border-radius: 3px;
  }

  .image_list {
    position: relative;
    width: 90px;
    height: 90px;
    margin-top: 5px;
    margin-right: 15px;

    .img {
      width: 90px;
      height: 90px;
      border-radius: 6px;

      &.yuna {
        border-radius: 90px;
      }
    }

    .demo_cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      overflow: hidden;
      cursor: pointer;
      background: rgb(0 0 0 / 60%);
    }

    &:hover {
      .demo_cover {
        width: 90px;
        height: 90px;
      }
    }
  }
}
</style>
